<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库存管理</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">库存管理</div>
            
            <!-- 库存概览 -->
            <div class="inventory-overview">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="overview-card total">
                            <div class="overview-item">
                                <div class="overview-number">{{ inventoryStats.totalSKU }}</div>
                                <div class="overview-label">总SKU数</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card value">
                            <div class="overview-item">
                                <div class="overview-number">{{ inventoryStats.totalValue }}</div>
                                <div class="overview-label">库存总值(万)</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card expiring">
                            <div class="overview-item">
                                <div class="overview-number">{{ inventoryStats.expiringSoon }}</div>
                                <div class="overview-label">即将过期</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card turnover">
                            <div class="overview-item">
                                <div class="overview-number">{{ inventoryStats.turnoverRate }}</div>
                                <div class="overview-label">周转率</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 功能选项卡 -->
            <el-tabs v-model="activeTab">
                <el-tab-pane label="出入库登记" name="inout-register">
                    <div class="register-section">
                        <el-row :gutter="20">
                            <el-col :span="16">
                                <el-card header="今日出入库记录">
                                    <div class="query-tools">
                                        <el-row :gutter="15">
                                            <el-col :span="6">
                                                <el-select v-model="registerQuery.type" placeholder="操作类型" clearable>
                                                    <el-option label="入库" value="in"></el-option>
                                                    <el-option label="出库" value="out"></el-option>
                                                </el-select>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-input v-model="registerQuery.batchNo" placeholder="批次号" clearable></el-input>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-input v-model="registerQuery.productName" placeholder="商品名称" clearable></el-input>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-button type="primary" @click="searchRecords">查询</el-button>
                                                <el-button @click="resetQuery">重置</el-button>
                                            </el-col>
                                        </el-row>
                                    </div>

                                    <el-table :data="inoutRecords" border style="width: 100%; margin-top: 20px;">
                                        <el-table-column prop="time" label="操作时间" width="140"></el-table-column>
                                        <el-table-column prop="type" label="类型" width="80">
                                            <template slot-scope="scope">
                                                <el-tag :type="scope.row.type === '入库' ? 'success' : 'warning'">
                                                    {{ scope.row.type }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="productName" label="商品名称" width="150"></el-table-column>
                                        <el-table-column prop="batchNo" label="批次号" width="120"></el-table-column>
                                        <el-table-column prop="quantity" label="数量" width="80"></el-table-column>
                                        <el-table-column prop="location" label="位置" width="120"></el-table-column>
                                        <el-table-column prop="operator" label="操作员" width="100"></el-table-column>
                                        <el-table-column label="操作" width="120">
                                            <template slot-scope="scope">
                                                <el-button size="mini" @click="viewDetail(scope.row)">详情</el-button>
                                                <el-button size="mini" type="primary" @click="printLabel(scope.row)">打印</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card header="快速入库">
                                    <el-form :model="quickInForm" label-width="80px" size="small">
                                        <el-form-item label="商品名称">
                                            <el-input v-model="quickInForm.productName" placeholder="请输入商品名称"></el-input>
                                        </el-form-item>
                                        <el-form-item label="批次号">
                                            <el-input v-model="quickInForm.batchNo" placeholder="自动生成" disabled></el-input>
                                        </el-form-item>
                                        <el-form-item label="数量">
                                            <el-input v-model="quickInForm.quantity" placeholder="请输入数量"></el-input>
                                        </el-form-item>
                                        <el-form-item label="存储位置">
                                            <el-select v-model="quickInForm.location" placeholder="选择位置">
                                                <el-option label="A区-冷冻-001" value="A-001"></el-option>
                                                <el-option label="B区-冷藏-001" value="B-001"></el-option>
                                                <el-option label="C区-常温-001" value="C-001"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="生产日期">
                                            <el-date-picker v-model="quickInForm.productionDate" type="date" placeholder="选择日期"></el-date-picker>
                                        </el-form-item>
                                        <el-form-item label="保质期">
                                            <el-input v-model="quickInForm.shelfLife" placeholder="天数"></el-input>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="primary" @click="quickInbound">确认入库</el-button>
                                            <el-button @click="resetQuickForm">重置</el-button>
                                        </el-form-item>
                                    </el-form>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="库存盘点" name="inventory-check">
                    <div class="check-section">
                        <el-card header="盘点管理">
                            <div class="check-tools">
                                <el-button type="primary" @click="createCheck">新建盘点</el-button>
                                <el-button type="success" @click="importCheck">导入盘点</el-button>
                                <el-button type="warning" @click="exportCheck">导出盘点</el-button>
                            </div>

                            <el-table :data="checkRecords" border style="width: 100%; margin-top: 20px;">
                                <el-table-column prop="checkNo" label="盘点单号" width="140"></el-table-column>
                                <el-table-column prop="checkDate" label="盘点日期" width="120"></el-table-column>
                                <el-table-column prop="checkType" label="盘点类型" width="120">
                                    <template slot-scope="scope">
                                        <el-tag :type="getCheckTypeColor(scope.row.checkType)">
                                            {{ scope.row.checkType }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="zone" label="盘点区域" width="120"></el-table-column>
                                <el-table-column prop="totalItems" label="盘点品项" width="100"></el-table-column>
                                <el-table-column prop="differences" label="盘点差异" width="100">
                                    <template slot-scope="scope">
                                        <span :style="{color: scope.row.differences > 0 ? '#F56C6C' : '#67C23A'}">
                                            {{ scope.row.differences }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="状态" width="100">
                                    <template slot-scope="scope">
                                        <el-tag :type="getStatusColor(scope.row.status)">
                                            {{ scope.row.status }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="operator" label="操作人" width="100"></el-table-column>
                                <el-table-column label="操作" width="200">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="viewCheckDetail(scope.row)">详情</el-button>
                                        <el-button size="mini" type="primary" @click="editCheck(scope.row)" v-if="scope.row.status === '进行中'">编辑</el-button>
                                        <el-button size="mini" type="success" @click="completeCheck(scope.row)" v-if="scope.row.status === '进行中'">完成</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="效期管理" name="expiry-management">
                    <div class="expiry-section">
                        <el-row :gutter="20">
                            <el-col :span="16">
                                <el-card header="效期预警">
                                    <div class="expiry-filters">
                                        <el-row :gutter="15">
                                            <el-col :span="6">
                                                <el-select v-model="expiryQuery.warningLevel" placeholder="预警级别" clearable>
                                                    <el-option label="即将过期(3天内)" value="urgent"></el-option>
                                                    <el-option label="临期预警(7天内)" value="warning"></el-option>
                                                    <el-option label="正常库存" value="normal"></el-option>
                                                </el-select>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-input v-model="expiryQuery.productName" placeholder="商品名称" clearable></el-input>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-button type="primary" @click="searchExpiry">查询</el-button>
                                                <el-button @click="resetExpiryQuery">重置</el-button>
                                            </el-col>
                                        </el-row>
                                    </div>

                                    <el-table :data="expiryData" border style="width: 100%; margin-top: 20px;">
                                        <el-table-column prop="productName" label="商品名称" width="150"></el-table-column>
                                        <el-table-column prop="batchNo" label="批次号" width="120"></el-table-column>
                                        <el-table-column prop="quantity" label="库存数量" width="100"></el-table-column>
                                        <el-table-column prop="productionDate" label="生产日期" width="120"></el-table-column>
                                        <el-table-column prop="expiryDate" label="过期日期" width="120"></el-table-column>
                                        <el-table-column prop="remainingDays" label="剩余天数" width="100">
                                            <template slot-scope="scope">
                                                <span :style="{color: getExpiryColor(scope.row.remainingDays)}">
                                                    {{ scope.row.remainingDays }}天
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="warningLevel" label="预警级别" width="100">
                                            <template slot-scope="scope">
                                                <el-tag :type="getWarningColor(scope.row.warningLevel)">
                                                    {{ scope.row.warningLevel }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" width="200">
                                            <template slot-scope="scope">
                                                <el-button size="mini" @click="handleExpiry(scope.row)">处理</el-button>
                                                <el-button size="mini" type="warning" @click="markDiscount(scope.row)">促销</el-button>
                                                <el-button size="mini" type="danger" @click="markExpired(scope.row)">报废</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card header="效期统计">
                                    <div class="expiry-stats">
                                        <div class="stat-item urgent">
                                            <div class="stat-number">{{ expiryStats.urgent }}</div>
                                            <div class="stat-label">即将过期</div>
                                        </div>
                                        <div class="stat-item warning">
                                            <div class="stat-number">{{ expiryStats.warning }}</div>
                                            <div class="stat-label">临期预警</div>
                                        </div>
                                        <div class="stat-item expired">
                                            <div class="stat-number">{{ expiryStats.expired }}</div>
                                            <div class="stat-label">已过期</div>
                                        </div>
                                        <div class="stat-item loss">
                                            <div class="stat-number">{{ expiryStats.loss }}</div>
                                            <div class="stat-label">损失金额(万)</div>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'inout-register',
                    inventoryStats: {
                        totalSKU: 1256,
                        totalValue: 368.5,
                        expiringSoon: 23,
                        turnoverRate: 12.5
                    },
                    registerQuery: {
                        type: '',
                        batchNo: '',
                        productName: ''
                    },
                    quickInForm: {
                        productName: '',
                        batchNo: 'IN' + Date.now(),
                        quantity: '',
                        location: '',
                        productionDate: '',
                        shelfLife: ''
                    },
                    inoutRecords: [
                        {
                            time: '2024-01-16 09:30',
                            type: '入库',
                            productName: '进口三文鱼',
                            batchNo: 'IN20240116001',
                            quantity: 50,
                            location: 'A区-001',
                            operator: '张三'
                        },
                        {
                            time: '2024-01-16 10:15',
                            type: '出库',
                            productName: '冷冻虾仁',
                            batchNo: 'OUT20240116001',
                            quantity: 30,
                            location: 'A区-002',
                            operator: '李四'
                        }
                    ],
                    checkRecords: [
                        {
                            checkNo: 'PD20240116001',
                            checkDate: '2024-01-16',
                            checkType: '定期盘点',
                            zone: 'A区冷冻',
                            totalItems: 156,
                            differences: 3,
                            status: '已完成',
                            operator: '王五'
                        },
                        {
                            checkNo: 'PD20240115001',
                            checkDate: '2024-01-15',
                            checkType: '循环盘点',
                            zone: 'B区冷藏',
                            totalItems: 89,
                            differences: 0,
                            status: '进行中',
                            operator: '赵六'
                        }
                    ],
                    expiryQuery: {
                        warningLevel: '',
                        productName: ''
                    },
                    expiryData: [
                        {
                            productName: '进口牛肉',
                            batchNo: 'IN20240101001',
                            quantity: 25,
                            productionDate: '2024-01-01',
                            expiryDate: '2024-01-18',
                            remainingDays: 2,
                            warningLevel: '紧急'
                        },
                        {
                            productName: '冷冻鸡翅',
                            batchNo: 'IN20240105001',
                            quantity: 40,
                            productionDate: '2024-01-05',
                            expiryDate: '2024-01-22',
                            remainingDays: 6,
                            warningLevel: '预警'
                        }
                    ],
                    expiryStats: {
                        urgent: 23,
                        warning: 67,
                        expired: 5,
                        loss: 12.3
                    }
                }
            },
            methods: {
                getCheckTypeColor(type) {
                    const colorMap = {
                        '定期盘点': 'primary',
                        '循环盘点': 'success',
                        '临时盘点': 'warning'
                    };
                    return colorMap[type] || 'info';
                },
                getStatusColor(status) {
                    const colorMap = {
                        '进行中': 'warning',
                        '已完成': 'success',
                        '已取消': 'danger'
                    };
                    return colorMap[status] || 'info';
                },
                getExpiryColor(days) {
                    if (days <= 3) return '#F56C6C';
                    if (days <= 7) return '#E6A23C';
                    return '#67C23A';
                },
                getWarningColor(level) {
                    const colorMap = {
                        '紧急': 'danger',
                        '预警': 'warning',
                        '正常': 'success'
                    };
                    return colorMap[level] || 'info';
                },
                searchRecords() {
                    this.$message.success('查询完成');
                },
                resetQuery() {
                    this.registerQuery = { type: '', batchNo: '', productName: '' };
                },
                viewDetail(row) {
                    this.$message.info('查看详情功能开发中');
                },
                printLabel(row) {
                    this.$message.success('标签打印成功');
                },
                quickInbound() {
                    this.$confirm('确认快速入库？', '入库确认').then(() => {
                        this.$message.success('入库成功');
                        this.resetQuickForm();
                    });
                },
                resetQuickForm() {
                    this.quickInForm = {
                        productName: '',
                        batchNo: 'IN' + Date.now(),
                        quantity: '',
                        location: '',
                        productionDate: '',
                        shelfLife: ''
                    };
                },
                createCheck() {
                    this.$message.info('新建盘点功能开发中');
                },
                importCheck() {
                    this.$message.info('导入盘点功能开发中');
                },
                exportCheck() {
                    this.$message.success('盘点数据导出成功');
                },
                viewCheckDetail(row) {
                    this.$message.info('查看盘点详情功能开发中');
                },
                editCheck(row) {
                    this.$message.info('编辑盘点功能开发中');
                },
                completeCheck(row) {
                    this.$confirm('确认完成盘点？', '盘点确认').then(() => {
                        row.status = '已完成';
                        this.$message.success('盘点已完成');
                    });
                },
                searchExpiry() {
                    this.$message.success('查询完成');
                },
                resetExpiryQuery() {
                    this.expiryQuery = { warningLevel: '', productName: '' };
                },
                handleExpiry(row) {
                    this.$message.info('效期处理功能开发中');
                },
                markDiscount(row) {
                    this.$confirm('确认标记为促销商品？', '促销确认').then(() => {
                        this.$message.success('已标记为促销商品');
                    });
                },
                markExpired(row) {
                    this.$confirm('确认标记为报废？', '报废确认').then(() => {
                        this.$message.warning('已标记为报废');
                    });
                }
            }
        });
    </script>

    <style scoped>
        .inventory-overview {
            margin-bottom: 30px;
        }
        
        .overview-card {
            text-align: center;
            transition: all 0.3s;
        }
        
        .overview-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .overview-card.total {
            border-left: 4px solid #409EFF;
        }
        
        .overview-card.value {
            border-left: 4px solid #67C23A;
        }
        
        .overview-card.expiring {
            border-left: 4px solid #F56C6C;
        }
        
        .overview-card.turnover {
            border-left: 4px solid #E6A23C;
        }
        
        .overview-number {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
        }
        
        .overview-label {
            color: #606266;
            margin: 8px 0;
        }
        
        .register-section, .check-section, .expiry-section {
            margin-bottom: 20px;
        }
        
        .query-tools, .check-tools, .expiry-filters {
            margin-bottom: 20px;
        }
        
        .check-tools {
            text-align: left;
        }
        
        .check-tools .el-button {
            margin-right: 10px;
        }
        
        .expiry-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .stat-item {
            text-align: center;
            padding: 20px;
            border-radius: 8px;
            background: #f8f9fa;
        }
        
        .stat-item.urgent {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
        }
        
        .stat-item.warning {
            background: linear-gradient(135deg, #ffa726, #ffb74d);
            color: white;
        }
        
        .stat-item.expired {
            background: linear-gradient(135deg, #ef5350, #e57373);
            color: white;
        }
        
        .stat-item.loss {
            background: linear-gradient(135deg, #42a5f5, #64b5f6);
            color: white;
        }
        
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }
    </style>
</body>
</html>